<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 20px;
        }

        * {
            margin: 0;
            padding: 0;

        }

        #box {
            width: 16rem;
            height: 8rem;
            overflow: hidden;
        }

        #box ul {
            width: calc(16rem * 4);
            height: 8rem;
            display: flex;
            list-style: none;
            _transition: .3s all linear;
        }

        #box li {
            width: 16rem;
            height: 8rem;
        }
    </style>
    <script>
        function change() {
            document.documentElement.style.fontSize = document.documentElement.clientWidth * 20 / 320 + 'px';
        }
        document.addEventListener('DOMContentLoaded', change);
        window.addEventListener('resize', change);
    </script>
</head>

<body>
    <div id="box">
        <ul>
            <li style="background: red"></li>
            <li style="background: rgb(12, 112, 104)"></li>
            <li style="background: rgb(184, 219, 58)"></li>
            <li style="background: rgb(197, 41, 158)"></li>
        </ul>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const oBox = document.querySelector('#box');
            const oUl = document.querySelector('#box ul');
            let oldX = 0; //上一次移动的变化量
            const NUM = oUl.children.length;
            const W = oUl.children[0].offsetWidth;
            let inow = 0  //当前所在的位置

            oUl.addEventListener('touchstart', (ev) => {
                let dx = ev.targetTouches[0].pageX
                let downX = dx - oldX;
                oUl.style.transition='none';

                const fnMove = (ev) => {
                    let x = ev.targetTouches[0].pageX - downX;
                    console.log(-(NUM - 1) * W, x)
                    if (x >= 0) {
                        x = 0;
                    } else if (x <= -(NUM - 1) * W) {
                        x = -(NUM - 1) * W
                    }
                    oldX = x;

                    oUl.style.transform = 'translateX(' + x + 'px)';
                }

                const fnEnd = (ev) => {
                    let ux=ev.changedTouches[0].pageX;
                    /* if(ux-dx>0){
                        //向右在拖动  看前一页
                        if(ux-dx<50){
                            //移动的距离小，回到原位
                        }else{
                            //去前一页
                        }
                    }else{ //向左拖动    看下一页
                        if(ux-dx>-50){
                            //移动的距离小，回到原位
                        }else{
                            //去下一页
                        }
                       
                    } */
                    //console.log(ux,dx);
                    if(Math.abs(ux-dx)>50){ //移动的距离大
                       
                        if(ux>dx){//向右在拖动  看前一页 
                            inow--;
                            if(inow==-1)inow=0;
                        }else{//向左拖动    看下一页
                            inow++;
                            if(inow==NUM)inow=NUM-1;
                        }
                    }else{//移动的距离小
                        //回到原位
                    }
                    oldX=-inow*W;
                    oUl.style.transform='.5s all linear';
                    oUl.style.transform = 'translateX(' + oldX + 'px)';

                    oUl.removeEventListener('touchmove', fnMove);
                    oUl.removeEventListener('touchend', fnEnd);
                }

                oUl.addEventListener('touchmove', fnMove);
                oUl.addEventListener('touchend', fnEnd);
                ev.preventDefault();
            })
        })
    </script>
</body>

</html>